<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tone莫斯码小测1.0</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/TimeFactory.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #EE8D99;
        }
    </style>
</head>
<body>
    <script>
        var letters=['C','D','E','F','G','A','B'];//
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();
        var now;
        var keyDict={};
        var morseCode='';
        var clearTime=0;
        const cc='F6'
        const [MIN,MAX,NUM]=[200,550,5];
        var [width,height]=[window.innerWidth-5,window.innerHeight-5];
        var [wid,hei,g]=[width/NUM-3,width/NUM-3,2];
        var [cx,cy]=[wid/2+g+5,hei/2+wid];
        var colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9]);
        var maps=[];
        var allData = [
			['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
			['1','2','3','4','5','6','7','8','9','0'],
			['.',':',',',';','?','=',"'",'/','!','-','_','"','(',')','$','&','@','+',' ']
		]
        var letters=allData[0];
        var index=0;
        const btnNames=['字母','数字','符号','全部','重听'];
        const answers1=[]; 
        const answers2=[];
        var selectType;
        var answer;
        var moonjs = new MoonJs();
        var canvas=moonjs.createCanvas({w:width,h:height,c:'#EE8D99'})
        moonjs.init(canvas)
        moonjs.start();//开始渲染
        if(!Unify.isMobile()){//PC上的排版（默认是移动端的排版）
            wid=height/10;
            hei=wid;
            cy=hei/2+wid;
            cx=(width-wid*NUM)/2;
        }
        let fontSize=20;
        if(Unify.isMobile()) fontSize=50;
        createMap();
        function createMap(){
            let y=0;
            for(let i=0;i<5;i++){
                for(let j=0;j<5;j++){
                    let name=letters[Math.floor(Math.random()*letters.length)];
                    let color=colors[i%2==0?j:5-j]
                    let rect=moonjs.createRectText(name,wid,hei,'#fff',color,'roundRect');
                    y=cy+i*(hei+g)
                    rect.setXY(cx+j*(wid+g),y);
                    rect.name=name;
                    rect.childs[0].setFont(`${fontSize}px Arial`);
                    maps.push(rect);
                    moonjs.mouseTouch(rect,mouseDown);
                }
            }
            for(let i=0;i<5;i++){
                let name=btnNames[i];
                let color=colors[i+1]
                let rect=moonjs.createRectText(name,wid,hei,'#fff',color,'roundRect');
                rect.setXY(cx+i*(wid+g),y+wid*2);
                rect.name=name;
                rect.childs[0].setFont(`${fontSize}px Arial`);
                moonjs.mouseTouch(rect,controlGame);
            }
        }
        function mouseDown(o){
            let name=o.name;
            console.log(answer,name)
            if(answer==name){
                o.setScale(0);
                this.soundRight();
            }else{
                this.soundWrong();
                moonjs.to(o,{scaleX:0.6,scaleY:0.6},100,(o)=>{o.scaleX=1;o.scaleY=1});
            }
        }
        function controlGame(o){
            let name=o.name;
            moonjs.to(o,{scaleX:0.6,scaleY:0.6},100,(o)=>{o.scaleX=1;o.scaleY=1});
            switch(name){
                case btnNames[0]:reGame(0);break;
                case btnNames[1]:reGame(1);break;
                case btnNames[2]:reGame(2);break;
                case btnNames[3]:reGame(3);break;
                case btnNames[4]:playSound();break;
            }
        }
        function soundRight(){
            index++;
            now = Tone.now();
            synth.triggerAttackRelease('A7', '8n');
            setTimeout(()=>{
                if(index<answers1.length){
                    playSound();
                }else{
                    TimeFactory.useTime('keyName',1,gameOver,'');
                }
            },1000);
        }
        function gameOver(num){
            num=TimeFactory.formatTime(num/1000,1)
            alert('游戏结束,用时是'+num);
            setTimeout(()=>{reGame(selectType);},500);
        }
        function soundWrong(){
            now = Tone.now();
            synth.triggerAttackRelease('D3', '8n');
        }
        function reGame(type){
            selectType=type;
            if(type<3){
                letters=allData[type];
            }else{
                letters=allData[0].concat(allData[1])//.concat(allData[2]);
            }
            TimeFactory.useTime('keyName',0);
            answers1.length=0;
            answers2.length=0;
            index=0;
            maps.forEach(o=>{
                o.setScale(1);
                let name=letters[Math.floor(Math.random()*letters.length)];
                o.name=name;
                o.childs[0].setText(name);
                answers1.push(name);
            })
            answers1.sort(()=>Math.random()-0.5);
            answers1.forEach(o=>{
                answers2.push(Unify.mosi(o,0).split(' ')[0]);
            })
            console.log(answers1,answers2)
            playSound();
        }
        function playSound(){
            if(index>=answers1.length){
                alert('未开始')
                return;
            }
            let code=answers2[index];
            answer=answers1[index];
            let values=code.split('');
            let tt=0;
            //values=['-','.','-']//测试
            for(let i=0;i<values.length;i++){
                let v=values[i];
                let t=v=='-'?MAX:MIN;//这里的t如果使用var则setTimeout里面的函数t就会一样，使用let则保留原来值
                let t1=v=='.'?MAX:MIN;
                let n=t==MAX?'8n':'32n';
                tt+=t1+MIN;
                //console.log(v,t,t1,tt);
                setTimeout(()=>{
                    //now = Tone.now();
                    //synth.triggerAttack(cc, now);
                    //synth.triggerRelease(cc,now+t/1000);  
                    synth.triggerAttackRelease(cc, n);
                    //console.log(t)  
                },tt);
            }
        }
        reGame(0);
    </script>
</body>

</html>
